<form name="staticForm" class="form-main">
    <div class="form-group" layout="column">
        <label>{/'Stack Template Name' | translate/}<span class="required">*</span>
            <small></small>
        </label>
        <div class="form-control">
            <input type="text" data-ng-model="stackCreateByJsonCtrl.form.Namespace" data-required="required" name="Name"
                   data-ng-pattern="/^[A-Za-z0-9]+$/" focus-me>
        </div>
        <div ng-messages="staticForm.Name.$error" ng-if="staticForm.Name.$dirty" role="alert">
            <p class="text-danger help-text" ng-message="required">{/'Name field is required' | translate/}</p>
            <p class="text-danger help-text" ng-message="pattern">{/'Only number and letter permitted' | translate/}</p>
        </div>
    </div>
    <!--<div class="form-group" layout="column">
        <label>选择用户组
            <small></small>
        </label>
        <div class="form-control">
            <div class="form-control">
                <md-select data-ng-model="stackCreateByJsonCtrl.selectGroupId" aria-label="selectGroupId"
                           md-on-open="stackCreateByJsonCtrl.loadGroups()">
                    <md-option value="null" ng-selected="true">{/'Empty' | translate/}</md-option>
                    <md-option
                            data-ng-repeat="group in stackCreateByJsonCtrl.groups"
                            ng-value="group.Id">{/group.Name/}
                    </md-option>
                </md-select>
            </div>
        </div>
    </div>-->

    <div class="form-group" layout="column">
        <label dm-doc-link='https://blog.docker.com/2016/06/docker-app-bundle/'>DAB<span
                class="required">*</span></label>
        <div class="form-control">
            <textarea data-ng-model="stackCreateByJsonCtrl.stack" data-required="required" name="Stack" ui-codemirror
                      ui-codemirror-opts="stackCreateByJsonCtrl.editorOptions"
                      ui-refresh="stackCreateByJsonCtrl.refreshCodeMirror"
                      data-ng-change="stackCreateByJsonCtrl.stackChange()"></textarea>
        </div>

        <div ng-messages="staticForm.Stack.$error" ng-if="staticForm.Stack.$dirty" role="alert">
            <p class="text-danger help-text"
               ng-message="required">
                <small>{/'Volume Name is required' | translate/}</small>
            </p>
        </div>
        <p class="text-danger help-text" data-ng-show="stackCreateByJsonCtrl.errorInfo.stack">
            {/stackCreateByJsonCtrl.errorInfo.stack/}
        </p>

        <div layout="row" layout-align="space-between start" style="width: 580px;">
            <div flex="none">
                <input id="dockerFileInput" name="file" type="file" class="ng-hide" accept="text/plain, .json"
                       onchange="angular.element(this).scope().stackCreateByJsonCtrl.onFileSelect(this.files)">
                <md-button trigger-prev-click class="md-small md-primary"><i class="fa fa-upload"></i> {/'Read from a file' | translate/}
                </md-button>
            </div>

            <div flex="none">
                <md-menu md-offset="0 -5">
                    <md-button aria-label="More" ng-click="$mdOpenMenu($event)" class="md-small md-primary">
                        <i class="fa fa-ellipsis-h"></i> 试试看
                    </md-button>
                    <md-menu-content width="2">
                        <md-menu-item>
                            <md-button data-ng-click="stackCreateByJsonCtrl.getStackExample('2048')"><i
                                    class="fa fa-file-text"></i> 2048游戏
                            </md-button>
                        </md-menu-item>
                        <md-menu-item>
                            <md-button data-ng-click="stackCreateByJsonCtrl.getStackExample('mysql_display')"><i
                                    class="fa fa-file-text"></i> MySQL/MyWebSQL
                            </md-button>
                        </md-menu-item>
                        <md-menu-item>
                            <md-button data-ng-click="stackCreateByJsonCtrl.getStackExample('wordpress')"><i
                                    class="fa fa-file-text"></i> Wordpress/MySQL
                            </md-button>
                        </md-menu-item>
                    </md-menu-content>
                </md-menu>
            </div>
        </div>
    </div>
    <footer class="form-buttons">
        <md-button class="md-raised md-primary"
                   data-ng-disabled="staticForm.$invalid || stackCreateByJsonCtrl.errorInfo.stack"
                   data-ng-click="stackCreateByJsonCtrl.create()">{/'Deploy' | translate/}
        </md-button>
        <md-button class="md-raised md-primary"
                   data-ng-disabled="staticForm.$invalid || stackCreateByJsonCtrl.errorInfo.stack"
                   data-ng-click="stackCreateByJsonCtrl.createAndDownload()">{/'Deployment and export' | translate/}
        </md-button>
        <md-button data-ng-click="rootCtrl.goBack()">{/'Cancel' | translate/}</md-button>
    </footer>
</form>
